<template>
    <div style="background-color: #fff;text-align: center;width: 100%;height: 100%;margin: 0;padding: 0;">
        <iframe id="alipay"  frameborder="0" src="https://www.alipay.com" align="middle"
                allowfullscreen="true" style="border: 2px solid red;height: 100%;width: 100%;"></iframe>
    </div>
</template>

<script>
    import {setupWebViewJavascriptBridge} from '../lib/bridge'
    export default {
        name: "alipay",
        mounted() {
            // document.getElementById("alipay").height = window.screen.height;
            // document.getElementById("alipay").width = window.screen.width;

            /*这段代码是固定的，必须要放到js中*/
            setupWebViewJavascriptBridge()

            /*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
            setupWebViewJavascriptBridge(function(bridge) {

                var uniqueId = 1
                function log(message, data) {
                    // var log = document.getElementById('log')
                    // var el = document.createElement('div')
                    // el.className = 'logLine'
                    // el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                    // if (log.children.length) {
                    //     log.insertBefore(el, log.children[0])
                    // } else {
                    //     log.appendChild(el)
                    // }
                }


                alert(11);
                bridge.callHandler('getUserIdFromObjC', {'blogURL': 'alipays://www.com'}, function(response) {
                    log('JS got response', response)
                });

                /* Initialize your app here */

                /*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的博文*/
                bridge.registerHandler('openWebviewBridgeArticle', function() {
                    alert();

                    log("点击了 <打开博文>按钮 openWebviewBridgeArticle was called with by ObjC")
                })
                /*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调给ObjC*/
                bridge.registerHandler('getUserInfos', function(data, responseCallback) {
                    log("这是在H5中的getUserInfos 接收的从ObjC传过来的参数", data)
                    responseCallback({'userId': '123456', 'blog': '标哥的技术博客'})
                })

                /*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
                bridge.callHandler('getUserIdFromObjC', function(responseData) {
                    log("这是在H5中的getUserIdFromObjC方法对应的参数responseData的值", responseData)
                })

                document.getElementById('blogId').onclick = function (e) {
                    log('js call objc: getBlogNameFromObjC')

                    //{'blogURL': 'http://www.henishuo.com'} 这是json字符串,传到iOS端会被WebViewJavascriptBridge自动转换成id对象，然后在回调处看到的就是字典对象了。
                    bridge.callHandler('getUserIdFromObjC', {'blogURL': 'https:alipay.com'}, function(response) {
                        log('JS got response', response)
                    })
                }
            })

        }
    }
</script>

<style scoped>

</style>